<div class="container">
	<div class="row">
		<div class="span2" ng-controller="getUser">
			<p>username:{{user.name}}</p>
			<p>password:{{user.pw}}</p>
			<p>{{data}}</p>
		</div>
		<div class="span8" ng-controller="getItems">
			<select ng-model="Item">
				<option ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>
			</select>
		</div>
	</div>	
	<div class="dropdown">
	  <button class="btn" data-toggle="dropdown">Dropdown trigger</button> 
	  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
	    <li><a tabindex="-1" href="#">Action</a></li>
	    <li><a tabindex="-1" href="#">Another action</a></li>
	    <li><a tabindex="-1" href="#">Something else here</a></li>
	    <li class="divider"></li>
	    <li><a tabindex="-1" href="#">Separated link</a></li>
	  </ul>
	</div>
	<div class="dropdown">
	  <a id="drop1" href="" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
	  <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
	    <li><a tabindex="-1" href="#">Action</a></li>
	    <li><a tabindex="-1" href="#">Another action</a></li>
	    <li><a tabindex="-1" href="#">Something else here</a></li>
	    <li class="divider"></li>
	    <li><a tabindex="-1" href="#">Separated link</a></li>
	  </ul>
	</div>
	
	<div class="btn-toolbar">
	  <div class="btn-group">
	    <button class="btn">1</button>
	    <button class="btn">2</button>
	    <button class="btn">3</button>
	  </div>
	  <div class="btn-group">
	    <button class="btn">1</button>
	    <button class="btn">2</button>
	    <button class="btn">3</button>
	  </div>
	</div>
	
	<div class="btn-group">
	  <button class="btn">Action</button>
	  <button class="btn dropdown-toggle" data-toggle="dropdown">
	    <span class="caret"></span>
	  </button>
	  <ul class="dropdown-menu">
	    <li><a tabindex="-1" href="#">Action</a></li>
	    <li><a tabindex="-1" href="#">Another action</a></li>
	    <li><a tabindex="-1" href="#">Something else here</a></li>
	    <li class="divider"></li>
	    <li><a tabindex="-1" href="#">Separated link</a></li>
	  </ul>
	</div>
	
	<div class="btn-group dropup">
	  <button class="btn">Dropup</button>
	  <button class="btn dropdown-toggle" data-toggle="dropdown">
	    <span class="caret"></span>
	  </button>
	  <ul class="dropdown-menu">
	    <li><a tabindex="-1" href="#">Action</a></li>
	    <li><a tabindex="-1" href="#">Another action</a></li>
	    <li><a tabindex="-1" href="#">Something else here</a></li>
	    <li class="divider"></li>
	    <li><a tabindex="-1" href="#">Separated link</a></li>
	  </ul>
	</div>
	
	<p class="alert alert-success">abc<button class="alert alert-danger">efg</button></p>
	<p class="label label-warning">abc</p>
	<p class="label label-inverse">abc</p>
	<p class="progress progress-danger bar">abc</p>
	
	<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>
	
	<button type="button" class="btn btn-primary" data-toggle="button">Single Toggle</button>
	
	<div class="btn-group" data-toggle="button-checkbox">
	  <button type="button" class="btn btn-primary">Left</button>
	  <button type="button" class="btn btn-primary">Middle</button>
	  <button type="button" class="btn btn-primary">Right</button>
	</div>
	
	<div class="btn-group" data-toggle="buttons-radio">  
	  <button type="button" class="btn btn-primary">Left</button>  
	  <button type="button" class="btn btn-primary">Middle</button>  
	  <button type="button" class="btn btn-primary">Right</button>  
	</div>
	
	<div ng-controller="tryy">
	      <!--<select ng-model="selection" ng-options="item for item in items">
	      </select>
	      <tt>selection={{selection}}</tt>
	      <hr/>-->
	      <div class="animate-switch-container"
	        ng-switch on="selection">
	          <div class="animate-switch" ng-switch-when="settings">Settings Div</div>
	          <div class="animate-switch" ng-switch-when="home">Home Spannn</div>
	          <div class="animate-switch" ng-switch-default>default</div>
	      </div>
	</div>
	
	<div>
		<ul class="pager">
		  <li><a href="">Previous</a></li>
		  <li><a href="">Next</a></li>
		</ul>
	</div>
	
	<p class="label label-inverse">abc</p>
	
	<div>
		<ul class="pagination pagination-sm">
		  <li class="disabled"><a href="">&laquo;</a></li>
		  <li><a href="">1</a></li>
		  <li><a href="">2</a></li>
		  <li class="active"><a href="">3</a></li>
		  <li><a href="">4</a></li>
		  <li><a href="">5</a></li>
		  <li><a href="">&raquo;</a></li>
		</ul>
	</div>
	
	<p class="label label-inverse">abc</p>
	
	<div class="dropdown">
	  <button class="btn dropdown-toggle sr-only" type="button" id="dropdownMenu1" data-toggle="dropdown">
	    Dropdown
	    <span class="caret"></span>
	  </button>
	  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
	    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
	    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
	    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
	    <li role="presentation" class="divider"></li>
	    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
	  </ul>
	</div>
	
	<p class="label label-inverse">abc</p>
	
	<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#demo">
	  simple collapsible
	</button>
	<div id="demo" class="collapse in">...</div>
	
	<p class="label label-inverse">abc</p>
	
	 <!-- Button trigger modal -->
	<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	  Launch demo modal
	</button>
	
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
	      </div>
	      <div class="modal-body">
	        ...
	      </div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
	        <button type="button" class="btn btn-primary">Save changes</button>
	      </div>
	    </div><!-- /.modal-content -->
	  </div><!-- /.modal-dialog -->
	</div><!-- /.modal -->
	
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
	  <!-- Indicators -->
	  <ol class="carousel-indicators">
	    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
	  </ol>
	
	  <!-- Wrapper for slides -->
	  <div class="carousel-inner">
	    <div class="item active">
	      <img src="..." alt="...">
	      <div class="carousel-caption">
	        ...
	      </div>
	    </div>
	    ...
	  </div>
	
	  <!-- Controls -->
	  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left"></span>
	  </a>
	  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right"></span>
	  </a>
	</div>
	
	<div class="container">
	    <form action="" class="form-horizontal"  role="form">
	        <fieldset>
	            <legend>Test</legend>
	            <div class="form-group">
	                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
	                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
	                    <input class="form-control" size="16" type="text" value="" readonly>
	                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
						<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
	                </div>
					<input type="hidden" id="dtp_input1" value="" /><br/>
	            </div>
				<div class="form-group">
	                <label for="dtp_input2" class="col-md-2 control-label">Date Picking</label>
	                <div class="input-group date form_date col-md-5" data-date="" data-date-format="dd MM yyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
	                    <input class="form-control" size="16" type="text" value="" readonly>
	                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
						<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
	                </div>
					<input type="hidden" id="dtp_input2" value="" /><br/>
	            </div>
				<div class="form-group">
	                <label for="dtp_input3" class="col-md-2 control-label">Time Picking</label>
	                <div class="input-group date form_time col-md-5" data-date="" data-date-format="hh:ii" data-link-field="dtp_input3" data-link-format="hh:ii">
	                    <input class="form-control" size="16" type="text" value="" readonly>
	                    <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
						<span class="input-group-addon"><span class="glyphicon glyphicon-time"></span></span>
	                </div>
					<input type="hidden" id="dtp_input3" value="" /><br/>
	            </div>
	        </fieldset>
	    </form>
	</div>
</div>